<template>
	<tm-fullView :text="false">
		<tm-menubars fontColor="white" :transparent="true">
			<template #left>
				<view class="flex flex-center">
					<!-- <tm-avatar :size="64" src="https://img.js.design/assets/img/616678eb2769e00d41966add.jpg"></tm-avatar> -->
					<view class="flex-col flex-center">
						<tm-images :width="64" :height="64" :round="24" src="https://img.js.design/assets/img/616678eb2769e00d41966add.jpg" model="aspectFill"></tm-images>
					</view>
					<view class="flex-col max-content line-height-1 mx-20">
						<view>
							<text class="text-size-s text-weight-b">龙轩彤</text>
						</view>
						<view>
							<text class="text-size-xxs">排行榜 8</text>
						</view>
					</view>
					<view class="follow-btn tag-accent round-24">
						<view class="text-align-center fulled-height flex-col flex-center">
							<text class="text-size-s">关注</text>
						</view>
					</view>
				</view>
			</template>
			<template #default>
				<view></view>
			</template>
		</tm-menubars>
		<!-- #ifdef MP-WEIXIN || MP-TOUTIAO || MP-BAIDU -->
		<live-player class="blue fulled fulled-height live-player" src="https://domain/pull_stream" autoplay @statechange="statechange" @error="error">
			<template>
				<cover-view class="fulled-height flex-col" style="padding-top: 500rpx;">
					<cover-view class="flex-col flex-center">
						<cover-view class="pink text rounded flex-col flex-center" style="width: 120rpx;height: 120rpx;">
							<cover-image class="live_bg bk" src="/static/live/live_bg.png"></cover-image>
						</cover-view>
						<cover-view class="text-size-base mt-15 text-grey-lighten-1">主播还未开播，请耐心等待！</cover-view>
					</cover-view>
				</cover-view>
				<cover-view class="absolute t-0 l-0" style="z-index: 9999;">
					<cover-view>2222</cover-view>
				</cover-view>
			</template>
		</live-player>
		<!-- #endif -->
		<tm-empty v-if="!enableLive"></tm-empty>
		<view v-if="!enableLive">
			<view>22222</view>
		</view>
	</tm-fullView>
</template>

<script>
	export default {
		data() {
			return {
				enableLive: true
			}
		},
		methods: {
			statechange(e) {
				console.log('live-player code:', e.detail.code)
			},
			error(e) {
				this.enableLive = false;
				uni.showModal({
					title: '提示',
					content: e.detail.errMsg,
					showCancel: false,
					cancelText: '',
					confirmText: '确定',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
				console.error('live-player error:', e.detail.errMsg)
			}
		}
	}
</script>

<style>
	.live-player {
		height: 100vh;
	}
	.live_bg {
		width: 100rpx;
		height: 100rpx;
	}
</style>
